<template>
    <div id="app">
        <Head>发布项目</Head>
        <div class="center">
            <van-field
              required
              v-model="sub.proname"
              label="项目名称"
              placeholder="请填写项目名称"
              class="reset_after"
            />
            <van-field
              required
              v-model="sub.money"
              label="预算价格"
              placeholder="请填写您的预算(元)"
              type="number"
              class="reset_after"
            />
            <van-field
              required
              :value="sub.date"
              label="截止日期"
              readonly
              placeholder="请选择接单截止日期"
              @click="showPopup"
              class="form_choose reset_after"
            />
            <van-field
              required
              v-model="sub.day"
              label="预计工期"
              placeholder="请填写项目所需工期(天)"
              type="number"
              class="reset_after"
            />
            <van-field
              required
              :value="sub.describe"
              label="项目描述"
              readonly
              placeholder="请简要描述您的项目"
              @click="decshow=true"
              class="form_choose reset_after"
            />
            <van-field
              required
              v-model="sub.name"
              label="联系人"
              placeholder="请填写联系人姓名"
              class="reset_after"
            />
            <van-field
              required
              v-model="sub.call"
              label="联系电话"
              placeholder="请填写您的联系电话"
              type="number"
              class="reset_after"
            />
            <van-field
              v-model="sub.wechat"
              label="联系微信"
              placeholder="请填写微信号"
              class="reset_after no_border"
            />
            <div class="for_btn">
              <div class="sync_phone">
                <van-checkbox v-model="sub.callsny" @change="snyphone" icon-size="16px">同手机号</van-checkbox>
              </div>
            </div>

            <div class="line top" v-if="paymoney!='0'">
                <div class="title">需要支付</div>
                <div class="money">{{paymoney}}元</div>
            </div>
            <div class="line stip" v-if="paymoney!='0'">完成支付后即可完成发布，金额概不退还</div>

            <div class="btn" @click="save">发&nbsp;&nbsp;布</div>
        </div>
        <van-popup
        v-model="decshow"
        position="right"
        duration="0.2"
        :overlay="true"
        :style="{ height: '100%', width: '100%' }"
        >
            <Prodescribe
                @hideProdescribe="toggle"
                @doProdescribe="doProdescribe"
            ></Prodescribe>
        </van-popup>
        <van-popup v-model="show" round position="bottom" class="popup" >
            <van-datetime-picker
            type="date"
            title="截止日期"
            :min-date="minDate"
            :formatter="formatterDate"
            @confirm="handlerDate"
            @cancel="show = false"
            />
        </van-popup>
        <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="paymoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" success-url="/freelance/promanage"></PaySubmit>
    </div>
</template>
<script>
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import http from '@/utils/http'
import api from '@/api'
import Prodescribe from '@/components/freelance/prodescribe'

export default {
  components: {
    PaySubmit,
    PopupPayment,
    Prodescribe
  },
  data () {
    return {
      minDate: new Date(),
      decshow: false,
      show: false,
      paymoney: '0', // 是否支付 if0不支付 else支付
      sub: {
        id: '',
        proname: '',
        money: '',
        date: '',
        day: '',
        describe: '',
        name: '',
        call: '',
        wechat: '',
        callsny: ''
      },
      paymoth: 'wxpay',
      showPayment: false
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.id = this.$route.query.id
    }
    this.fetchData()
  },
  methods: {
    onLoad () {

    },
    showPopup () {
      this.show = true
    },
    handlerDate (e) {
      let d = new Date(e)
      this.sub.date =
                d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      this.show = false
    },
    formatterDate (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      }
      return val
    },
    snyphone () {
      if (this.sub.callsny) {
        this.sub.wechat = this.sub.call
      } else {
        this.sub.wechat = ''
      }
    },
    fetchData () {
      http.get(api.pre_save_subject, {id: this.sub.id})
        .then(res => {
          this.paymoney = res.data.need_pay_money

          this.sub.proname = res.data.title
          this.sub.money = res.data.price
          this.sub.date = res.data.endtime
          this.sub.day = res.data.period
          this.sub.describe = res.data.desc
          this.sub.name = res.data.linkman
          this.sub.call = res.data.mobile
          this.sub.wechat = res.data.weixin
        }).catch(() => {
        })
    },
    toggle () {
      this.decshow = !this.decshow
    },
    // 项目描述
    doProdescribe (data) {
      this.sub.describe = data.prodescribe
    },
    // 发布
    save () {
      if (!this.sub.proname) {
        this.$notify('请填写项目名称')
        return false
      }
      if (!this.sub.money) {
        this.$notify('请填写预算价格')
        return false
      }
      if (!this.sub.date) {
        this.$notify('请填写截止时间')
        return false
      }
      if (!this.sub.day) {
        this.$notify('请填写预计工期')
        return false
      }
      if (!this.sub.describe) {
        this.$notify('请填写项目描述')
        return false
      }
      if (!this.sub.name) {
        this.$notify('请填写联系人')
        return false
      }
      if (!this.sub.call) {
        this.$notify('请填写联系电话')
        return false
      }
      var numReg = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(this.sub.call)) {
        this.$notify('联系电话格式不正确')
        return false
      }

      http
        .post(api.save_subject, {
          id: this.sub.id,
          title: this.sub.proname,
          price: this.sub.money,
          endtime: this.sub.date,
          period: this.sub.day,
          desc: this.sub.describe,
          linkman: this.sub.name,
          mobile: this.sub.call,
          weixin: this.sub.wechat
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.sub.id = res.data.id
            if (this.paymoney == '0') {
              this.$notify({ type: 'success', message: res.message })
              this.$router.push({ path: '/freelance/promanage' })
            } else {
              this.showPayment = true
            }
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.order_pay, {
        id: this.sub.id,
        order_type: 2,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'freelance/promanage'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.center{
    background-color: #f3f3f3;
    height: calc(100vh - 53px);
    overflow: auto;
    .line{
        height: 54px;
        background-color: #ffffff;
        border-left: 18px solid #ffffff;
        border-right: 18px solid #ffffff;
        border-top: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        position: relative;
        &.top{
            margin-top: 5px;
            border-top: 0px solid #f2f2f2;
        }
        .title{
            margin-left: 10px;
            line-height: 1;
            font-size: 14px;
            color: #333333;
            position: relative;
        }
        .money{
            position: absolute;
            left: 100px;
            color: #ff5d3c;
            font-size: 14px;
        }
        &.stip{
            justify-content: center;
            font-size: 13px;
            color: #999999;
        }
    }
    .btn{
        margin-top: 30px;
        margin-left: 21px;
        margin-bottom: 30px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #464646;
        border-radius: 50px;
        background-color: #fed700;
        box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    }
    .sync_phone {
      .van-checkbox { line-height: 50px; height: 50px; }
      position: absolute;
      right: 0;
      top: -50px;
      font-size: 14px;
      color: #515151;
      padding: 0 15px;
      height: 50px;
      line-height: 50px;
    }
}
.center::-webkit-scrollbar{
    display: none;
}
</style>
